import { useImageStore } from '@/domain/correction/hooks/image';
import { computed, defineComponent, onMounted, onUnmounted, reactive, Ref, ref, toRaw } from 'vue';
import { Popup, Toast } from 'vant';
import BHeader from './bottomHeader';
const base = import.meta.env.BASE_URL;
export default defineComponent({
  name: 'chartlet',
  setup() {
    const show = ref(true);
    const store = useImageStore();
    //目前42个图片
    const imgCont = 42;
    const ImgContent = () => {
      const list: JSX.Element[] = [];
      for (let i = 0; i < imgCont; i++) {
        const imageUrl = base + 'lib/images/' + (i + 1) + '.png';
        list.push(
          <img
            class={' inline-block m-3 align-top w-r7.25 h-r7.25 bg-gray-50 rounded-md shadow '}
            onClick={() => {
              const im = store.state.activeImageManages?.im!;
              const chartletList = im.stage.find('.chartlet');
              if (chartletList.length >= 5) {
                Toast.fail('贴图数量不能超过五个');
                return;
              }
              im.loadImageData(imageUrl, 'chartlet');
              show.value = false;
              im.flyback();
            }}
            src={imageUrl}
            alt=""
          ></img>
        );
      }

      return <>{list}</>;
    };
    return () => (
      <Popup position="bottom" show={show.value} style={{ height: '40%' }}>
        <div class={' w-full h-full overflow-y-scroll  text-center'}>
          <ImgContent></ImgContent>
        </div>
        <BHeader
          name={'贴图'}
          cannel={() => {
            show.value = false;
            return true;
          }}
          okShow={false}
        ></BHeader>
      </Popup>
    );
  }
});
